<script setup>
import {ref, computed, watch, onMounted} from 'vue'
import axios from "axios";
import {useRoute} from "vue-router";

const route = useRoute()
const orderInfo = ref({
  id: null,
  orderNumber: '',
  userAccount: '',
  orderSource: '',
  paymentMethod: '',
  fee: 0,
  goods: [],
  userAddresses: {
    addressId: null,
    receiverName: '',
    receiverPhone: '',
    province: '',
    city: '',
    area: '',
    detailAddress: '',
    postalCode: '',
    isDefault: 0
  }
})


watch(() => route.query.id, (newValue) => {
  id.value = newValue
  initData(newValue)
})

const id = ref(route.query.id)

const initData = () => {
  axios.get(`/order/getOrderDetail/${id.value}`).then(res => {
    orderInfo.value = res.data
  })
}

const productTotal = computed(() => {
  return orderInfo.value.goods.reduce((sum, product) => {
    const quantity = product.quantity || 1;
    return sum + (product.price * quantity)
  }, 0)
})

const fullAddress = computed(() => {
  const addr = orderInfo.value.userAddresses
  return `${addr?.province ?? ''} ${addr?.city ?? ''} ${addr?.area ?? ''}`
})

const orderTotal = computed(() => {
  return productTotal.value + (orderInfo.value.fee || 0)
})

const payableAmount = computed(() => {
  return orderTotal.value
})

onMounted(() => {
  initData()
})
</script>

<template>
  <div class="order-detail-container">
    <h1>订单详情_待付款</h1>

    <div class="order-timeline">
      <el-steps :active="1" simple>
        <el-step title="提交订单" :description="orderInfo.submitTime" />
        <el-step title="支付订单" />
        <el-step title="订单发货" />
        <el-step title="确认收货" />
        <el-step title="完成评价" />
      </el-steps>
    </div>

    <el-divider class="custom-divider" />

    <div class="order-status">
      <h3>当前订单状态：待付款</h3>
    </div>

    <div class="order-actions">
      <el-button type="text" class="action-btn">基础信息</el-button>
      <el-button type="text" class="action-btn">修改收货信息</el-button>
      <el-button type="text" class="action-btn">修改费用信息</el-button>
      <el-button type="text" class="action-btn">关闭订单</el-button>
      <el-button type="text" class="action-btn">备注订单</el-button>
    </div>

    <div class="order-base-info">
      <el-table :data="[orderInfo]" border class="custom-table">
        <el-table-column prop="orderNumber" label="订单编号" width="180" />
        <el-table-column prop="userAccount" label="用户账号" width="120" />
        <el-table-column prop="paymentMethod" label="支付方式" width="100" />
        <el-table-column prop="orderSource" label="订单来源" width="100" />
      </el-table>
    </div>

    <el-divider class="custom-divider" />

    <div class="receiver-info">
      <h3>收货人信息</h3>
      <el-table :data="[orderInfo.userAddresses]" border class="custom-table">
        <el-table-column prop="receiverName" label="收货人" width="120" />
        <el-table-column prop="receiverPhone" label="联系方式" width="150" />
        <el-table-column prop="postalCode" label="邮政编码" width="120" />
        <el-table-column label="收货地址">
          <template #default="{ row }">
            {{ fullAddress }}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-divider class="custom-divider" />

    <div class="product-info">
      <h3>商品信息</h3>
      <el-table :data="orderInfo.goods" border class="custom-table">
        <el-table-column label="商品图片" width="120">
          <template #default="{ row }">
            <el-image
                :src="row.image"
                :preview-src-list="[row.image]"
                fit="cover"
                class="product-image"
            />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="商品名称" width="180" />
        <el-table-column prop="price" label="价格" width="120">
          <template #default="{ row }">
            ¥{{ row.price }}
          </template>
        </el-table-column>
        <el-table-column prop="goodsNum" label="编码" width="120" />
        <el-table-column prop="numbers" label="数量" width="80" />
        <el-table-column label="小计" width="120">
          <template #default="{ row }">
            ¥{{ row.price * row.numbers }}
          </template>
        </el-table-column>
      </el-table>

      <div class="total-amount">
        <span class="total-label">合计：</span>
        <span class="total-price">¥{{ productTotal }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.order-detail-container {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.order-timeline {
  margin: 20px 0;
}

.custom-divider {
  margin: 20px 0;
}

.order-status {
  margin: 16px 0;
}

.order-actions {
  margin: 16px 0;
  display: flex;
  gap: 12px;
}

.action-btn {
  padding: 0 8px;
  font-size: 14px;
}

.custom-table {
  width: 100%;
  margin-top: 12px;
}

.receiver-info {
  margin: 20px 0;
}

.product-info {
  margin: 20px 0;
}

.product-image {
  width: 60px;
  height: 60px;
  border-radius: 4px;
}

.total-amount {
  margin-top: 16px;
  text-align: right;
  font-size: 15px;
  padding-right: 12px;
}

.total-price {
  font-weight: 600;
  color: #f56c6c;
  font-size: 16px;
}

.cost-info {
  margin: 20px 0;
}

.cost-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 600px;
  margin-top: 16px;
}

.cost-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}

.cost-label {
  color: #666;
}

.cost-value {
  font-weight: 500;
}

.discount {
  color: #67c23a;
}

.total-row {
  border-top: 1px solid #ddd;
  margin-top: 4px;
  padding-top: 12px;
}

.payable-row {
  background-color: #f5f7fa;
  border-radius: 4px;
  margin-top: 8px;
}

.payable {
  color: #f56c6c;
  font-weight: 600;
  font-size: 16px;
}

h1 {
  font-size: 20px;
  margin-bottom: 16px;
  color: #333;
  font-weight: 600;
}

h3 {
  font-size: 16px;
  margin-bottom: 12px;
  color: #333;
  font-weight: 500;
}
</style>